<template>
  <div class="swiperBox">
    <img src="" alt="" @click="clickLeft" class="leftimgDiv">
    <img src="" alt="" @click="clickRight" class="rightimgDiv">
    <div id="swiper">
      <div class="imgBox">
        <div class="imgDiv" v-for="(item, index) of imgList" v-bind:key="index">
          <img :src="images" alt="" style="width:100px;height:100px;">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import images from '@/assets/images/img.png'
export default{
  name: 'BaseSwiper',
  props: {
    speed: Number,
    direction: String
  },
  data () {
    return {
      images,
      imgList: [
        {},
        {},
        {},
        {},
        {},
        {}
      ],
      timer: null,
      theSpeed: this.speed,
      imgWidth: 260,
      theDirection: this.direction,
      imgBox: ''
    }
  },
  methods: {
    clickLeft () {
      console.log('向左')
      this.theDirection = 'left'
      this.autoScroll()
    },
    clickRight () {
      this.theDirection = 'right'
      this.autoScroll()
    },
    autoScroll () {
      if (this.imgBox.offsetLeft < -(this.imgBox.offsetWidth / 2)) {
        this.imgBox.style.left = 0
      }
      if (this.imgBox.offsetLeft > 0) {
        this.imgBox.style.left = -(this.imgBox.offsetWidth / 2) + 'px'
      }
      // let slef = this
      if (this.theDirection === 'left') {
        this.theSpeed = -Math.abs(this.theSpeed)
      } else {
        this.theSpeed = Math.abs(this.theSpeed)
      }
      // 求出总的left值，等于left值加上移动的速度（px值）
      this.imgBox.style.left = this.imgBox.offsetLeft + this.theSpeed + 'px'
    }
  },
  mounted () {
    this.imgBox = document.getElementsByClassName('imgBox')[0]
    // 将imgBox下的图片进行拼接 循环展示图片
    this.imgBox.innerHTML += this.imgBox.innerHTML
    let imgDiv = document.getElementsByClassName('imgDiv')
    this.imgBox.style.width = imgDiv.length * this.imgWidth + 'px' // 设置div的宽度使图片可以放下
    // console.log(imgBox.offsetWidth, imgBox.style.width)
    // this.timer = setInterval(this.autoScroll, 30) // 全局变量 ，保存返回的定时器
  },
  beforeDestroy () {
    clearInterval(this.timer)
    this.timer = null
  }
}
</script>
<style scoped lang='less'>
  .swiperBox {
    height: 100%;
    width: 100%;
    position:relative;
    .imgLeft{
      left:0;
      top:40%;
    }
    .imgLeft,
    .imgRight{
      width:27px;
      height:38px;
      position:absolute;
      cursor:pointer;
    }
    .imgRight{
      right:0;
      top:40%;
    }
    .directionIcon:hover{
      opacity:1;
    }
  }
  #swiper{
    width:90%;
    height:100%;
    margin:0auto;
    overflow:hidden;
    position:relative;
    .imgBox{
      height:100%;
      position:absolute;
      left:0;
      top:0;
      overflow:hidden;
      display:flex;
      .imgDiv{
        width:100%;
        margin-left:15px;
        img{
          height:100%;
          width:280px;
          //width:260px;
          //height:120px;
        }
      }
    }
  }
  .leftimgDiv {
    width: 30px;
    height: 30px;
    background: red;
  }
  .rightimgDiv {
     width: 30px;
    height: 30px;
    background: green;
    float: right;
  }
</style>
